<script setup lang="ts">
import Trans from "~/utils/sycm/trans";

const props = defineProps({
  data: {
    type: Object,
  },
  date: {
    type: String,
  },
  showZs: {
    type: Boolean,
    default: true,
  },
});
const dataSource = ref<any[]>([]);
const calcData = (data: any) => {
  let keys = Object.keys(data);
  let key:string = '';
  keys.map(item => {
    if (item.indexOf('sycm-mc-industry-customer-cate-preference-') > -1) {
      key = item;
    }
  })
  columns.value = [
    {
      dataIndex: 'name',
      title: '商品名称',
      sorter: (a: any, b: any) => a.name - b.name,
      width: 300,
      dataType: 'product',
      dataField:{
        item_id: 'id',
        item_pic: 'picUrl',
        item_title: 'name',
      }
    },
    {
      dataIndex: 'cate',
      title: '类目名称',
      width: 250,
      sorter: (a: any, b: any) => a.cate - b.cate,
    },
    {
      dataIndex: 'date',
      title: '日期',
      sorter: (a: any, b: any) => a.date - b.date,
    },
    {
      dataIndex: 'cateValue',
      title: props.showZs ? '总交易指数' : '总交易金额',
      sorter: (a: any, b: any) => a.cateValue - b.cateValue,
      // width: 80,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        if (props.showZs) {
          return text;
        } else {
          let amount;
          amount = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'price',
      title: '促销价格',
      sorter: (a: any, b: any) => a.price - b.price,
      align: 'right',
    },
    {
      dataIndex: 'value',
      title: props.showZs ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.value - b.value,
      // width: 80,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        if (props.showZs) {
          return text;
        } else {
          let amount;
          amount = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    }
  ];
  const arr: any[] = [];
  props.data[key].tableData.data.forEach((item: any, index: number) => {
    arr.push({
      id:item.id,
      itemUrl:item.itemUrl,
      picUrl:item.picUrl,
      name: item.name,
      cate: props.data[key][key+'-table'].tableData.data[props.data[key].rankColumn].name,
      date: props.date,
      price:item.price,
      cateValue: props.data[key][key+'-table'].tableData.data[props.data[key].rankColumn].tradeIndex,
      value: item.tradeIndex,
    })
  })
  dataSource.value = arr;
};
const columns = ref<any[]>([]);
onMounted(() => {
  calcData(props.data);
});
watch(() => props.data, (val) => {
  calcData(val);
}, {deep: true});
watch(() => props.date, (val) => {
  calcData(props.data);
}, {deep: true});
watch(() => props.showZs, (val) => {
  calcData(props.data);
}, {deep: true});
</script>

<template>
  <div class="content">
    <base-table :columns="columns" table-name="市场-行业客群-购买偏好-类目偏好-交易商品榜" :data-source="dataSource" :scroll="{
      y: 'calc(100vh - 280px)'
    }">

    </base-table>
  </div>
</template>

<style scoped>
.content {
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
</style>
